<template>
  <div class="event-containner">
    <van-nav-bar
      class="page-nav-bar"
      left-arrow
      title="个人详情"
      @click="this.$router.back();"
    ></van-nav-bar>
    <div class="article-detail">
  <div class="article-content-card">
    <h1 class="title">申请资料填写</h1>
    <van-form @submit="onSubmit">
      <van-cell-group inset>
        <van-field
          v-model="ApplyInfo.text"
          rows="2"
          autosize
          label="留言"
          type="textarea"
          maxlength="100"
          placeholder="请输入留言"
          show-word-limit
        />
        <van-cell-group inset>

          <van-uploader
            label="上传申请表"
            upload-icon="plus"
            upload-text="上传申请表"
            v-model="fileList"
            :after-read="onFileChange"
            accept="application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document"
            :max-count="1"
          />
          <van-tag plain  type="success">请上传word格式申请表</van-tag>
        </van-cell-group>
        <van-cell-group style="display: none;" inset>
          <van-field

            v-model="fileName"
            label="文件名"
            readonly
          />
        </van-cell-group>
      </van-cell-group>
      <div style="margin: 16px;">
        <van-button round block type="primary" native-type="submit">
          提交
        </van-button>
      </div>
    </van-form>

    <div class="article-footer"></div>
    <br>
  </div>
</div>

  </div>
</template>
<script>
import { Toast } from 'vant';
import { reactive, toRefs, ref } from 'vue';
import { upload,applyClub } from '../../api/club';

export default {
  props: {
    clubId: {
      type: String,
      required: true
    }
  },
  setup(props) {
    const state = reactive({
      ApplyInfo: {
        text: '',
        words: '',
        clubId: ''
      },
      fileName: ''
    });
    state.ApplyInfo.clubId = props.clubId;
    const fileList = ref([]);

    const onFileChange = async(file, detail) => {
      
   
    };
    const onSubmit = async () => {
      try {
      
        const file=fileList.value[0];
        
        if(file==null || state.ApplyInfo.text == ""){
          Toast.fail('有填写的信息为空');
          return;
        }
        upload(file).then(async (res)=>{
          state.ApplyInfo.words = res.data.data;
          
          if(res.data.code !=20000){
            Toast.fail(res.data.msg);
            return;
          }else{

            const { data } = await applyClub(state.ApplyInfo);
        if(data.code==20000){
          Toast.success('提交成功，请耐心等待审核！');
        }else{
          Toast.fail('你已经申请过了，请你耐心等待审核！');
        }
          }
    
        })
    
       
      
      } catch (error) {
        console.error(error);
        Toast.fail('提交失败');
      }
    };

    return {
      ...toRefs(state),
      onSubmit,
      fileList,
      onFileChange
    };
  }
};
</script>

<style scoped>
.article-content-card {
  padding: 24px;
  background-color: #fff;
  border-radius: 0px;
  box-shadow: 0px 4px 16px rgba(0, 0, 0, 0.08);
  margin-top: 10px;
}

.article-source-card {
  background-color: #3f64ca;
  color: #fff;
  padding: 8px 16px;
  border-radius: 16px;
  display: inline-block;
}

.article-time-card {
  margin-left: 16px;
  display: inline-block;
}
.loading-wrap{
    padding: 200px 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #fff;
}
.error-wrap{
    padding: 200px 32px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: #fff;
    
}
.title-card {
  background-color: #fff;
  border: 1px solid #eee;
  border-radius: 4px;
  padding: 20px;
  margin-bottom: 20px;
  box-shadow: 0px 2px 2px rgba(0, 0, 0, 0.1);
}

.title {
  font-size: 2em;
  font-weight: bold;
  margin: 0;
}

.article-detail {
    
  padding: 16px;
  background-color: #fff;
}

.article-header {
     width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 16px;
}

.title {
  font-size: 20px;
  font-weight: bold;
  text-align: center;
  margin-bottom: 16px;
}

.author-card {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  background-color: #f2f2f2;
  border-radius: 4px;
  padding: 12px 16px;
}

.author-info {
  display: flex;
  flex-direction: column;
}

.author-name {
  font-size: 16px;
  font-weight: bold;
  margin-bottom: 4px;
}

.article-date {
  font-size: 12px;
  color: #999;
}

.article-content {
  line-height: 1.5;
  font-size: 20px;
  text-align: center;
}

.article-footer {
  display: flex;
  justify-content: space-between;
  margin-top: 16px;
  font-size: 14px;
  color: #999;
}

.article-source {
  margin-right: 16px;
}

.article-time {
  margin-left: 16px;
}
.author-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.1);
}

.author-card .author-info {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-right: 24px;
}

.author-card .author-info .author-name {
  font-size: 24px;
  font-weight: bold;
  color: #333;
  margin-bottom: 8px;
}

.author-card .article-date {
  font-size: 16px;
  color: #999;
}
.article-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
}

.title {
  font-size: 28px;
  font-weight: bold;
  margin-bottom: 10px;
}

.author-card {
  display: flex;
  align-items: center;
  margin-top: 20px;
}

.author-avatar {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  overflow: hidden;
  margin-right: 20px;
}

.author-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.author-info {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
}

.author-name {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

.author-desc {
  font-size: 14px;
  margin-bottom: 5px;
}

.article-date {
  font-size: 14px;
  color: #999;
}

</style>